<template>
	<div class="container">
		<div class="jx-container">
      <div class="select-type" v-loading="boo.fileing">
        <div class="item">
          <span>店铺状态</span>
          <div class="right">
            <span v-for="(item, index) in shopStatus" :key="index" :class="params_list.shopStatus == item.label ? 'active' : ''" @click="selected(1,item)">{{item.label}}({{item.value}})</span>
          </div>
        </div>
        <div class="item">
          <span>店铺类型</span>
          <div class="right">
            <span v-for="(item, index) in shopCatalog" :key="index" :class="params_list.shopCatalogName == item.shopCatalogName ? 'active' : ''" @click="selected(2,item)">{{item.shopCatalogName}}({{item.value}})</span>
          </div>
        </div>
        <div class="item table-item">
          <div class="right">
            <div class="item-inline">
              <span>所在地区</span>
              <el-cascader
                class="tel-value"
                v-model="params_list.shopLocationProvinceCity"
                :options="options"
                :props="props"
                @change="handleChange">
              </el-cascader>
            </div>
            <div class="item-inline">
              <span>店铺名称</span>
              <el-input class="tel-value" v-model="params_list.shopName" placeholder="请输入店铺名称"></el-input>
            </div>
            <div class="item-inline">
              <span>资质类型</span>
              <el-select class="tel-value" v-model="params_list.shopLevel" placeholder="请选择">
                <el-option
                  v-for="(item,index) in qualification"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </div>
            <div class="item-inline">
              <span>加入服务</span>
              <el-select class="tel-value" v-model="params_list.shopServiceStatus" placeholder="请选择">
                <el-option
                  v-for="(item,index) in serviceStatus"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </div>
            <div class="item-inline">
              <span>上门服务</span>
              <el-select class="tel-value" v-model="params_list.isDoorDoorService" placeholder="请选择">
                <el-option label="是" value="true"></el-option>
                <el-option label="否" value="false"></el-option>
              </el-select>
            </div>
            <div class="item-inline">
              <el-button class="jx-btn" type="primary" @click="search">搜索</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="jx-table">
        <div class="title">
          <img class="icon" src="/static/img/icon-platform.png"/>
          店铺列表
        </div>
        <el-table :data="enter" border style="width: 100%" v-loading="boo.loading">
          <el-table-column type="index" label="序列" width="60" align="center">
            <template slot-scope="scope">
              <span>{{(scope.$index + 1) + ((params_list.page - 1) * params_list.size)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="shopName" label="店铺名称" width="150" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="shopLocationProvinceCity" label="所在地区" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="businessLoginname" label="登录账号" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="shopCatalogName" label="申请类型" align="center">
          </el-table-column>
          <el-table-column prop="shopLevel" label="资质类型" align="center" >
          </el-table-column>
          <el-table-column prop="serviceCount" label="加入服务" width="90" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span v-if="scope.row.service == 0">【未开通】</span>
              <span v-else-if="scope.row.service == -1">【未加入】</span>
              <el-button v-else @click="viewService(scope.row)" type="text" size="small">{{scope.row.serviceCount}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="isDoorDoorService" label="上门服务" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.isDoorDoorService == false">否</span>
              <el-button v-else @click="viewIsservice(scope.row)" type="text" size="small">是</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="isRoadSideService" label="道路救援" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.isRoadSideService == false">否</span>
              <el-button v-else @click="viewIssave(scope.row)" type="text" size="small">是</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="shopStatus" label="店铺状态" align="center" width="90">
          </el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button @click="viewRow(scope.row,1)" type="text" size="small">查看详情</el-button>
              <el-button @click="hiddenRow(scope.row)" type="text" size="small">{{scope.row.shopStatus == '正常' ? '冻结' : '解冻'}}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="enter.length != 0" class="jx-pagination">
          <el-pagination @current-change="pageChange" @size-change="handleSizeChange" :current-page="params_list.page" :page-sizes="[10,50,100]" :page-size="params_list.size" layout="total, sizes, prev, pager, next, jumper"
            :total="other.allRow">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 服务单 -->
    <el-dialog  :visible.sync="boo.showService" class="jx-dialog" width="75%">
      <div slot="title" class="header-title">
        <span class="title-name">服务单详情</span>
      </div>
      <div class="jx-detail">
        <div class="title">服务详情</div>
        <div class="detail-item">
          <div class="item_2">
            <div class="list">
              <span>开通时间：</span>
              <div class="right">
                <span>{{currentRow.serviceStartAt || '--'}}</span>
              </div>
            </div>
            <div class="list">
              <span>到期时间：</span>
              <div class="right">
                <span>{{currentRow.serviceEndAt || '--'}}</span>
              </div>
            </div>
            <div class="list">
              <span>当前服务状态：</span>
              <div class="right">
                <span>{{currentRow.serviceStatus || '--'}}</span>
              </div>
            </div>
          </div>
          <div class="item_2">
            <div class="list">
              <span>保证金方式：</span>
              <div class="right">
                <span>{{currentRow.depositCatalog || '--'}}</span>
              </div>
            </div>
            <div class="list">
              <span>保证金金额：</span>
              <div class="right">
                <span>{{currentRow.depositSum || '--'}}</span>
              </div>
            </div>
            <div class="list">
              <span>保障金额：</span>
              <div class="right">
                <span>{{currentRow.ensureSum || '--'}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="detail-item">
          <div class="item">
            <div class="title">服务内容</div>
            <div class="jx-table">
              <el-table :data="currentRow.details" border style="width: 100%" v-loading="boo.serveloading">
                <el-table-column type="index" label="序列" width="60" align="center">
                </el-table-column>
                <el-table-column prop="serviceName" label="服务名称" width="120" align="center">
                </el-table-column>
                <el-table-column prop="serviceProductName" label="服务商品编号" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="serviceProductList" label="商品清单" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="serviceProductShopPrice" label="服务价格" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="serviceProductShopSalePrice" label="出售价格" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="serviceProductShopStatus" label="状态" align="center" :show-overflow-tooltip="true">
               </el-table-column>
                <el-table-column label="操作" width="100" align="center">
                  <template slot-scope="scope">
                    <el-button @click="hiddenserveRow(scope.row)" type="text" size="small">{{scope.row.serviceProductShopStatus == '启用' ? '终止服务' : '恢复服务'}}</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div> 
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 上门服务 -->
    <el-dialog  :visible.sync="boo.showIsservice" class="jx-dialog" width="75%">
      <div slot="title" class="header-title">
        <span class="title-name">上门服务详情</span>
      </div>
      <div class="jx-detail">
        <div class="detail-item" v-loading="boo.serveloading2">
          <div class="item_2">
            <div class="title">服务详情</div>
            <div class="list">
              <span>当前服务状态：</span>
              <div class="right">
                <span>{{(currentRow.isDoorDoorService || '--') ? '服务中' : '已暂停'}}</span>
              </div>
            </div>
            <div class="list">
              <span>出发地点：</span>
              <div class="right">
                <span><img class="icon" src="/static/img/u178.png"/>{{currentRow.shopAddress || '--'}}</span>
              </div>
            </div>
            <div class="list">
              <span>到达地点：</span>
              <div class="right">
                <span><img class="icon" src="/static/img/u178.png"/>{{currentRow.wrong || '--'}}</span>
              </div>
            </div>
          </div>
          <div class="item_2">
            <div class="title">收费详情</div>
            <div class="list">
              <span>上门服务基价：</span>
              <div class="right">
                <span>{{currentRow.doorDoorServiceBaseFee || '--'}}元</span>
              </div>
            </div>
            <div class="list">
              <span>公里数范围：</span>
              <div class="right">
                <div class="cell" v-for="(item,index) in currentRow.betweens">
                  <span>{{item.from || '--'}}-{{item.to || '--'}}公里</span>
                  <span>{{item.result || '--'}}元</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 道路救援 -->
    <el-dialog  :visible.sync="boo.showIssave" class="jx-dialog" width="75%">
      <div slot="title" class="header-title">
        <span class="title-name">道路救援详情</span>
      </div>
      <div class="jx-detail">
        <div class="detail-item">
          <div class="item_2">
            <div class="title">服务详情</div>
            <div class="list">
              <span>当前服务状态：</span>
              <div class="right">
                <span>{{(currentRow.isRoadSideService || '--') ? '服务中' : '已暂停'}}</span>
              </div>
            </div>
            <div class="list">
              <span>出发地点：</span>
              <div class="right">
                <span><img class="icon" src="/static/img/u178.png"/>{{currentRow.shopAddress || '--'}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="detail-item">
          <div class="item">
            <div class="title">服务内容</div>
            <div class="jx-table">
              <el-table :data="currentRow.contents" border style="width: 100%" v-loading="boo.serveloading3">
                <el-table-column type="index" label="序列" width="60" align="center">
                </el-table-column>
                <el-table-column prop="carModel" label="车型" width="120" align="center">
                </el-table-column>
                <el-table-column prop="roadSiderServiceBaseFee" label="基价" align="center" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    {{scope.row.roadSiderServiceBaseFee || '--'}}元/次
                  </template>
                </el-table-column>
                <el-table-column prop="mileFee" label="公里数单价" align="center" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    {{scope.row.mileFee || '--'}}元/公里
                  </template>
                </el-table-column>
                <el-table-column prop="trailerFee" label="拖车费单价" align="center" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    {{scope.row.trailerFee || '--'}}元/公里
                  </template>
                </el-table-column>
                <el-table-column prop="loadFee" label="装卸费" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="craneFee" label="吊车费" align="center" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    {{scope.row.craneFee || '--'}}元/次
                  </template>
                </el-table-column>
                <el-table-column prop="serviceRemark" label="服务说明" width="100" align="center">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
        https: {
          list: this.$api.merchant.list,
          common: this.$api.common,
          shopCatalog: this.$api.setting.shop.page,
        },
        boo: {
          loading: false,
          showService: false,
          serveloading: false,
          serveloading2: false,
          serveloading3: false,
          showIsservice: false,
          showIssave: false,
        },
        other: {
          allRow: 1,
        },
        enter: '',
        currentRow: {},
        params_list: {
          page: 1,
          size: 10,
          shopStatus: '全部',
          shopCatalogName: '全部',
          shopLocationProvinceCity: '',
          shopName: '',
          shopLevel: '',
          shopServiceStatus: '',
          isDoorDoorService: '',
        },
        props: {
          expandTrigger: 'click', 
          value: 'field',
          label: 'field',
        },
        options: [],
        qualification: '',
        serviceStatus: '',
        shopStatus: [],
        shopCatalog: [],
			}
		},
		mounted(){
      let _self = this
      _self.getDict('shopLevel')
      _self.getDict('shopServiceStatus')
      _self.getDict('shopStatus')
      _self.getAddress()
      _self.getshopCatalog()
      _self.getList()
    },
		methods: {
      getDict(type){
        let _self = this
        let params = {
          dictCode: type,
        }
        // 新建判断Map
        let actions = (i,list,)=>{
          return new Map([
            ['shopLevel',()=>{
              _self.qualification = list
            }],
            ['shopServiceStatus',()=>{
              _self.serviceStatus = list
            }],
            ['shopStatus',()=>{
              let dataValueBatch = []
              list.forEach(item => {
                dataValueBatch.push({
                  value: '',
                  label: item,
                })
              });
              _self.shopStatus = dataValueBatch
              _self.shopStatus.unshift({
                value: '',
                label: '全部',
              })
            }]
          ]).get(i).call(this)
        }
        let success = (res)=>{
          if(res.data.retCode == 1){
            actions(type,res.data.retObject)
          }else{
            _self.$message.error(res.data.retMsg)
          }
        }
        _self.$axios.get(_self.https.common.dict, params, success) 
      },
      getAddress(){
        let _self = this
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.options = res.retObject
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.get(_self.https.common.address, {}, success) 
      },
      getshopCatalog(){
        let _self = this
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            res.retObject.forEach(item=>item.value = '')
            _self.shopCatalog = res.retObject
            _self.shopCatalog.unshift({
              shopCatalogName: '全部',
              value: ''
            })
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.get(_self.https.shopCatalog, {}, success) 
      },
      setValue(type, name, val){
        let _self = this
        if(type == '店铺状态'){
          let idx = _self.shopStatus.findIndex(item=>item.label == name)
          if(idx == -1) return _self.$message.error('无此店铺状态，请检查接口返回值')
          _self.shopStatus[idx].value = val
        }
        if(type == '店铺类型'){
          let idx = _self.shopCatalog.findIndex(item=>item.shopCatalogName == name)
          if(idx == -1) return
          // if(idx == -1) return _self.$message.error('无此店铺类型，请检查接口返回值')
          _self.shopCatalog[idx].value = val
        }
      },
      getList(){
        let _self = this
        let params = {
          shopStatus: _self.params_list.shopStatus == '全部' ? '' : _self.params_list.shopStatus,
          shopCatalogName: _self.params_list.shopCatalogName == '全部' ? '' : _self.params_list.shopCatalogName,
          shopLocationProvinceCity: _self.params_list.shopLocationProvinceCity || '',
          shopName: _self.params_list.shopName || '',
          shopLevel: _self.params_list.shopLevel || '',
          shopServiceStatus: _self.params_list.shopServiceStatus || '',
          isDoorDoorService: _self.params_list.isDoorDoorService || '',
          pageNumber: _self.params_list.page,
          pageSize: _self.params_list.size,
        }
        _self.boo.loading = true
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.enter = res.retObject.list
            _self.other.allRow = Number(res.retObject.totalRow)
            for(let key in res.retObject.paras.shopStatus){
              _self.setValue('店铺状态', key, res.retObject.paras.shopStatus[key])
            }
            for(let key in res.retObject.paras.shopCatalogName){
              _self.setValue('店铺类型', key, res.retObject.paras.shopCatalogName[key])
            }
            // _self.shopStatus = res.retObject.paras.shopStatus
          }else{
            _self.$message.error(res.retMsg)
          }
          _self.boo.loading = false
        }
        _self.$axios.get(_self.https.list.list, params, success) 
      },
      search(){
        let _self = this
        _self.getList()
      },
      pageChange(val){
        let _self = this
        _self.params_list.page = val
        _self.getList()
      },
      handleSizeChange(val) {
        let _self = this
        _self.params_list.size = val
        _self.getList()
      },
      selected(num, item){
        let _self = this
        switch (num) {
          case 1:
            _self.params_list.shopStatus = item.label
            break;
          case 2:
            _self.params_list.shopCatalogName = item.shopCatalogName
            break;
        }
        _self.getList()
      },
      viewRow(item,type){
        let _self = this
        let params = {
          path: '/merchant/detail/enter_detail?id=',
          query: item.shopId + '&type=' + type + '&detail=1'
        }
        _self.$router.push(params.path + params.query)
      },
      hiddenRow(item){
        let _self = this
        let params = {
          shopId: item.shopId,
          shopStatus: item.shopStatus == '正常' ? '冻结' : '正常',
        }
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.getList()
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.put(_self.https.list.hidden, params, success) 
      },
      // 服务单详情
      viewService(item){
        let _self = this
        _self.boo.showService = true
        // _self.currentRow = JSON.parse(JSON.stringify(item.servicedata))
        _self.getView(1,item)
      },
      getView(type,item){
        let _self = this
        let params = {
          id: item.shopId
        }
        if(type == 1){
          _self.boo.serveloading = true
        }else if(type == 2) {
          _self.boo.serveloading2 = true
        }else if(type == 3){
          _self.boo.serveloading3 = true
        }
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.currentRow = res.retObject
          }else{
            _self.$message.error(res.retMsg)
          }
          if(type == 1){
            _self.boo.serveloading = false
          }else if(type == 2) {
            _self.boo.serveloading2 = false
          }else if(type == 3){
            _self.boo.serveloading3 = false
          }
        }
        if(type == 1){
          _self.$axios.get(`${_self.https.list.server}${params.id}`, {}, success) 
        }else if(type == 2){
          _self.$axios.get(`${_self.https.list.doorServer}${params.id}`, {}, success) 
        }else if(type == 3) {
          _self.$axios.get(`${_self.https.list.roadServer}${params.id}`, {}, success) 
        }
      },
      hiddenserveRow(){

      },
      //  上门服务
      viewIsservice(item){
        let _self = this
        _self.boo.showIsservice = true
        _self.getView(2,item)
      },
      // 道路救援
      viewIssave(item){
        let _self = this
        _self.boo.showIssave = true
        _self.getView(3,item)
      }
    }
	}

</script>
<style scoped lang="sass">
  .select-type .table-item .right span
    width: 62px
</style>
